<script setup>
// 引入 api
import { ref } from "vue"

// v-if
const isOk = ref(true)

// v-show
const isShow = ref(true)

// 列表
const list = ref([
    1, 2, 3, 4, 5
])

// 点击函数
function btn1() {
    isOk.value = false;
}

function btn2() {
    isShow.value = false;
}
</script>

<template>
    <!-- 按钮 -->
    <input type="button" value="使用 v-if 隐藏" @click="btn1">
    <input type="button" value="使用 v-show 隐藏" @click="btn2">

    <!-- 渲染 -->
    <ul v-if="isOk" v-show="isShow">
        <li v-for="item in list">{{ item }}</li>
    </ul>
</template>